<template>
	<el-dialog :model-value="visible" width="40%" :z-index="9" @close="cancel">
		<template #header>
			<div class="custom-header">账号分配</div>
		</template>

		<div class="boardBox">
			<el-table
				v-loading="loading"
				:data="list"
				stripe
				element-loading-background="rgba(0, 0, 0, 0.5)"
				element-loading-text="加载中..."
				header-row-class-name="table-header"
			>
				<el-table-column key="index" label="序号" align="center" prop="index" />
				<el-table-column key="name" label="项目名称" align="center" prop="name" />
				<el-table-column key="sex" label="管理人员A" align="center" prop="sex"> </el-table-column>
				<el-table-column key="sex" label="管理人员B" align="center" prop="sex"> </el-table-column>
			</el-table>

			<el-form ref="queryForm" label-width="120px" class="mt20" :model="queryParams" :rules="rules" style="width: 60%">
				<el-form-item label="管理员A">
					<el-select v-model="queryParams.pera" placeholder="请选择">
						<el-option label="采集中" value="1"></el-option>
						<el-option label="已提交" value="2"></el-option>
						<el-option label="已退回" value="3"></el-option>
						<el-option label="已发布" value="4"></el-option>
						<el-option label="不通过" value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="管理员B" prop="status">
					<el-select v-model="queryParams.perb" placeholder="请选择">
						<el-option label="采集中" value="1"></el-option>
						<el-option label="已提交" value="2"></el-option>
						<el-option label="已退回" value="3"></el-option>
						<el-option label="已发布" value="4"></el-option>
						<el-option label="不通过" value="5"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary">保存</el-button>
				<el-button>取消</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	}
})
const deptoptions = ref([])
const job_modeoptions = ref([])
const filelist = reactive([])
const loading = ref(false)
const queryParams = ref({ pera: '', perb: '' })
const emit = defineEmits<{ (event: 'update:visible', value: boolean): void; (event: 'chananniu', value: ''): void }>()
// 获取表单引用
const queryForm = ref(null)
const uploadRef = ref(null)
const list = ref([
	{ name: 'aaa', sex: 1, index: 0 },
	{ name: 'ccc', sex: 1, index: 1 }
])
// 监听 localValue 的变化，通知父组件更新值
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			// const data = { name: '', dept_id: '', position: '', hired_time: '', job_status: '', mobile: '', date: moment().format('YYYY-MM-DD') }
			// queryParams.value = data
		}
	}
)
const info = ref({ url: '', qrcode: '' })
const addvisible = ref(false)

const rules = reactive({
	name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
	hired_time: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
	dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
	position: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
	mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
	job_status: [{ required: true, message: '请选择员工状态', trigger: 'change' }]
})
const jobstatusoptions = ref([
	{ value: 1, name: '试用' },
	{ value: 2, name: '正式' }
])
const props1 = reactive({
	checkStrictly: true,
	emitPath: false,
	multiple: false,
	value: 'id',
	label: 'name',
	children: 'children'
})

// const selectedArrRef = ref(null)
// function handleChange(value) {
// 	selectedArrRef.value.togglePopperVisible()
// }

function handleChansge(file: any) {
	let name = file.name

	// if (!/\.(pdf)$/.test(file.name)) {
	// 	ElMessage({
	// 		title: '错误',
	// 		message: '上传文件只能为pdf文件，且为pdf格式',
	// 		grouping: true,
	// 		type: 'error'
	// 	})
	// 	return false
	// }
}

function handleExceed(files: any) {
	// uploadRef.value.clearFiles()
	// nextTick(() => {
	// 	uploadRef.value.handleStart(files[0])
	// })
	// ElMessage({files, fileList
	//   title: "错误",
	//   message: `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
	//   grouping: true,
	//   type: "error",
	// });
	//     filelist.value = fileList;
}

function cancel() {
	emit('update:visible', false)
	emit('chananniu', '')
}
</script>

<style lang="scss" scoped>
.boardBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;

	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	-ms-overflow-style: none;
	scrollbar-width: none;

	.tishi {
		font-size: 14px;
		color: #999;
		background-color: #f3f8fb;
		padding: 5px 10px;
		border-radius: 6px;
	}
}
</style>
